html{
  font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $body-font;
  line-height: $base-line-height;
  font-weight: $normal;
}

body, button, input {
  color: $font-color;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: mix($action-color, $font-color, $fat-tint);
  color: $background-color;
}
::-moz-selection {
  background: mix($action-color, $font-color, $fat-tint);
  color: $background-color;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $heading-font;
  color: $heading-color;
  font-weight: $bold;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
}
/* remove code formatting from headers */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  background-color: inherit;
  font-size: inherit;
}
h1 {
  @include responsive-font(1.5vw, $h1-size);
  font-weight: $fat;
  margin-top: $base-spacing-unit * 2;
}
h2 {
  @include responsive-font(1.5vw, $h2-size);
  font-weight: $fat;
}
h3 {
  @include responsive-font(1.5vw, $h3-size);
}
h4 {
  @include responsive-font(1.5vw, $h4-size);
}
h5 {
  @include responsive-font(1.5vw, $h5-size);
  text-transform: uppercase;
  margin-bottom: 0;
}
p {
  margin-bottom: $base-spacing-unit;
}

pre, code {
  font-family: $code-font;
  font-weight: 400;
  background-color: $background-alt-color;
  border-radius: $brand-round;
  padding: $half-spacing-unit / 2;
  @include font-size($centi-size);
}
pre {
  margin-bottom: $base-spacing-unit;
  overflow-y: auto;
  @include media-query('palm') {
    border-radius: 0;
  }
}
pre > code {
  display: block;
  padding: 0;
}

blockquote {
  font-size: $h3-size;
  font-style: italic;
  padding: $base-spacing-unit * 1 0;
  color: $quiet-font-color - 10;
}

.section-heading {
  margin-top: $base-spacing-unit * 2;
  margin-bottom: $base-spacing-unit;
}

.h1-size {
  @extend .bottom-margin;
}

.beefcake,
.strong {
  font-weight:700;
}

.weak {
  font-weight: 300;
}

.bigger {
  @include font-size($h3-size);
  line-height: $base-line-height * 1.5;
}
.centi {
  font-family: $small-font;
  @include font-size($centi-size);
}
.small,
.milli {
  font-family: $small-font;
  @include font-size($milli-size);
}
.micro,
.tiny {
  font-family: $small-font;
  @include font-size($micro-size);
}

.quiet {
  color: mix($font-color, $background-color, 50%);
}

.em, .italic {
  font-style: italic;
}

.one-line {
  line-height: $base-line-height;
}
.two-lines {
  line-height: $base-line-height * 2;
}
.three-lines {
  line-height: $base-line-height * 3;
}

.right {
  text-align: right;
}

time {
  font-family: $small-font;
  color: $quiet-font-color;
  @include font-size($deci-size);
}

@mixin font-size-micro () {
  @include font-size($micro-size);
  font-weight: $bold;
}
@mixin font-size-milli () {
  @include font-size($milli-size);
  font-weight: $bold;
}
@mixin font-size-centi () {
  @include font-size($centi-size);
  font-weight: $bold;
}
@mixin font-size-deci () {
  @include font-size($deci-size);
}
